<template>
    <el-card>
        <model-view :editStatus="editStatus" v-if="dialogVisible" :obj="useData" @closeAction="closeAction"
                    :dialogVisible="dialogVisible"></model-view>
        <el-row>
            <el-form style="margin-top: 10px">
                <el-form-item label="生效时间：" style="width: 320px;float: left">
                    <el-date-picker v-model="date" value-format="yyyy-MM-dd" type="date" style="width: 150px"/>
                </el-form-item>
                <el-select v-model="value" placeholder="请选择发电类型" style="float:left">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-form-item style="float: left;margin-left:20px">
                    <el-button size="mini" type="primary" style="float: left;margin-top:5px;" @click="search">查询
                    </el-button>
                    <el-button size="mini" type="primary" style="float: left;margin-top:5px;" @click="add">新增
                    </el-button>
                    <el-button size="mini" type="primary" style="float: left;margin-top:5px;" @click="delAll">批量操作
                    </el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-table :border="true" :stripe="true"
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="发电类型"
                    fixed="left"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="startTime"
                    label="开始时间"
                    align="center"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="endTime"
                    label="结束时间"
                    align="center"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="plus"
                    label="正偏差"
                    align="center"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="minus"
                    label="负偏差"
                    align="center"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="备注"
                    align="center"
                    width="200">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100"
                    align="center">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">删除
                    </el-button>
                    <el-button @click.native.prevent="editRow(scope.$index, tableData)" type="text" size="small">编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<script>
    import ModelView from './ModelView';

    export default {
        components: {
            ModelView
        },
        data() {
            return {
                useData: {},
                editStatus: false,
                dialogVisible: false,
                date: new Date(),
                tableData: [{
                    startTime: '2016-05-03',
                    endTime: '2019-05-20',
                    type: '发电类型',
                    plus: '2',
                    minus:'2',
                    remark: '我也不知道为啥'
                }, {
                    startTime: '2016-05-03',
                    endTime: '2019-05-20',
                    type: '发电类型',
                    plus: '2',
                    minus:'2',
                    remark: '我也不知道为啥'
                }, {
                    startTime: '2016-05-03',
                    endTime: '2019-05-20',
                    type: '发电类型',
                    plus: '2',
                    minus:'2',
                    remark: '我也不知道为啥'
                }],
                options: [{
                    value: '选项1',
                    label: '发电类型一'
                }, {
                    value: '选项2',
                    label: '发电类型二'
                }, {
                    value: '选项3',
                    label: '发电类型三'
                }],
                value: '',
                multipleSelection: []
            };
        },
        methods: {
            search() {
                this.queryParam.pageInfo.pageNum = 1;
                this.queryPage(this.queryParam);
            },
            add() {
                this.dialogVisible = true;
                this.editStatus = false;
                this.useData = {};
            },
            delAll() {
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            editRow(index, rows) {
                this.dialogVisible = true;
                this.editStatus = true;
                this.useData = rows[index];
            },
            closeAction() {
                this.dialogVisible = false;
            }
        }
    };
</script>
<style scoped>

</style>